<template>
  <div class="qua">
    <van-nav-bar
        left-arrow
        @click-left="onClickLeft"
        title="资质预览"
    />
    <van-row v-for="(item,index) in quas" :key="item.id">
      <van-col span="2"></van-col>

      <van-col span="20">
        <div class="item-name" v-if="item.name">{{item.name}}</div>
        <img v-lazy="item.url" class="item-img" @click="previewImg(item,index)"/>
      </van-col>

      <van-col span="2"></van-col>
    </van-row>
  </div>
</template>

<script>
import {previewQua} from "@/api/operator";
import {ImagePreview} from "vant";

export default {
  data() {
    return {
      machineId: this.$route.query.id,
      quas: [],
      previewConfig: {
        images: [],
        startPosition: 0,
        closeable: true,
      },
      maxSort: 0
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    getList() {
      let params = {
        id: this.machineId
      }
      previewQua(params).then(res => {
        if (res.data) {
          res.data.forEach((item, index, arr) => {
            this.quas.push(item)
            this.previewConfig.images.push(item.url)
          })
        }
      })
    },
    previewImg(obj, index) {
      this.previewConfig.startPosition = index
      return ImagePreview(this.previewConfig);
    }
  },
  mounted() {
    this.getList()
  }
};
</script>

<style lang="less" scoped>
.qua {
  text-align: center;
  padding-bottom: 100px;

  .item-name{
    padding-top: 10px;
  }
  .item-img {
    width: 100%;
    height: 360px;
  }
}

</style>
